Fix: restore searchable dropdown for DAG params enum fields#63895
Fix: restore searchable dropdown for DAG params enum fields#63895nagasrisai wants to merge 27 commits intoapache:mainfrom
Conversation
nagasrisai
requested review from
bbovenzi,
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
boring-cyborg
bot
added
area:translations
area:UI
|
Let me know if anything needs adjusting. |
bbovenzi
left a comment
bbovenzi
left a comment
There was a problem hiding this comment.
We use chakra-react-select elsewhere in the UI if we want to allow searching
|
Done, switched to chakra-react-select. Also removed the custom search input and the translation key that are no longer needed. |
|
Can you provide a video or gif of the functionality? |
|
Here are some screenshots from running the fix locally on a DAG with 12 enum params. Clicking the field opens the full list: Typing filters it down in real time — here searching "east" narrows it to the matching regions: All 12 params render as searchable dropdowns. String, integer, and other param types are unaffected since the change only applies when |
|
Here's a gif showing the full interaction — dialog opening, full list rendering, then searching live as you type: The first frame shows the dropdown closed with the current value. Clicking opens the full option list. Typing narrows it down in real time. |
pierrejeambrun
left a comment
pierrejeambrun
left a comment
There was a problem hiding this comment.
Working as expected, looking good to me.
We just need to remove the screenshots.
airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldDropdown.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldDropdown.tsx
Outdated
Show resolved
Hide resolved
|
Hey @pierrejeambrun, just pushed the fixes for both comments ,removed the Option type and the generic from ReactSelect. Let me know if anything else looks off! |
|
@nagasrisai This PR has a few issues that need to be addressed before it can be reviewed — please see our Pull Request quality criteria. Issues found:
What to do next:
There is no rush — take your time and work at your own pace. We appreciate your contribution and are happy to wait for updates. If you have questions, feel free to ask on the Airflow Slack. |
|
Hey @potiuk, thanks for flagging this. Both threads from @pierrejeambrun have been addressed in the latest commit , removed the explicit |
|
CI need fixing, some formatting issue. |
Wrap nullish-coalescing expressions inside ternary branches with parentheses, and remove the misplaced eslint-disable comment that was not directly before a null literal. Both changes match what Prettier 3.x requires for `?? null` inside `? :` ternaries.
|
@pierrejeambrun Fixed, Prettier wanted parentheses around the @pierrejeambrun - please review |
4 participants
The DAG params dropdown was searchable in Airflow 2. You could type to narrow the list down to the option you wanted. That stopped working in Airflow 3.
Switched
FieldDropdownto usechakra-react-selectwhich already provides built-in search, consistent with howFieldMultiSelectworks in the same directory. Removed the customInputworkaround and the unused translation key that came with it.Closes #63879